<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>商品分类</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-2.0.3.js"></script>
	<script src="js/bootstrap.js"></script>
	<style>
		* {
			box-sizing: border-box;
		}
		html,body {
			margin: 0;
			padding: 0;
			border: 0;
		}
		.shoubu {
			width: 100rem;
			height: 0.8rem;
			background-color: #cccccc;
		}
		.shoubu2 {
			width: 100%;
			height: 0.8rem;
			text-align: center;
			position: fixed;
			display:flex;
			justify-content: space-between;
		}
		.tu1 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0.15rem;
		}
		b {
			font-size: 0.35rem;
			margin: 0.15rem;
		}
		.tu2 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0.15rem;
		}
		.fenlei {
			width: 100%;
			/*height: 3rem;*/
			/*border: 1px solid red;*/
			text-align: center;
		}
		.fenlei p {
			font-size: 0.25rem;
			margin-top: 0.6rem;
		}
		.shangpin {
			width: 100%;
			display:flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.shangpin img {
			width: 1.5rem;
			height: 1.5rem;
			margin-left: 0.5rem;
		}
		.shangpin p {
			margin-left: 1rem;
		}
		.kong {
			width: 100%;
			height: 0.3rem;
			background-color: #f1f1f1;
		}
		.wei {
			display:flex;
			justify-content: space-between;
			width: 100%;
			height: 0.8rem;
			background: #fff;
			border: 1px solid #ccc;
			text-align: center;
			position: fixed;
			bottom: 0;
		}
		.wei img {
			width: 0.5rem;
			height: 0.5rem;
		}
		.wei a {
			width: 24%;
			height: 0.8rem;
		}
		.qingchu {
			clear: both;
		}
		.tuzi1 p {
			font-size: 0.2rem;
		}
	</style>
</head>
<body>
<div class="shoubu">
	<div class="shoubu2">
	<a href="小米.html">
		<img class="tu1" src="jiantou.png" alt=""/>
	</a>
	<b>商品分类</b>
	<a href="#">
		<img class="tu2" src="sousuo.png" alt=""/>
	</a>
	</div>
	</div>
<div class="fenlei">
		<p>手机 / 平板 / 电话卡</p>
</div>
<div class="shangpin">
	<a href="#"><img class="dianshi1" src="T1m.dgBmbv1R4cSCrK.png" alt=""/><p>小米5</p></a>
	<a href="#"><img class="dianshi1" src="T13ZAQBsYT1R4cSCrK.png" alt=""/><p>小米4s</p></a>
	<a href="#"><img class="dianshi1" src="T1sHYgBmAv1R4cSCrK.png" alt=""/><p>小米Note</p></a>
	<a href="#"><img class="dianshi1" src="T1mSA_BjCT1R4cSCrK.png" alt=""/><p>小米4c</p></a>
	<a href="#"><img class="dianshi1" src="T127d_B_dT1R4cSCrK.png" alt=""/><p>小米4</p></a>
	<a href="#"><img class="dianshi1" src="T1sHYgBmAv1R4cSCrK.png" alt=""/><p>红米3</p></a>
	<a href="#"><img class="dianshi1" src="T1W1KgB4Ev1R4cSCrK.png" alt=""/><p>红米Note3</p></a>
	<a href="#"><img class="dianshi1" src="T1k5YjBQWT1R4cSCrK.png" alt=""/><p>小米平板2</p></a>
	<a href="#"><img class="dianshi1" src="T1TqV_B4Dv1R4cSCrK.png" alt=""/><p>电信手机</p></a>
	<a href="#"><img class="dianshi1" src="T1kAhgBCKv1R4cSCrK.png" alt=""/><p>官翻机</p></a>
	<a href="#"><img class="dianshi1" src="T19QL_Bj_T1R4cSCrK.png" alt=""/><p>小米移动</p></a>
</div>
<div class="kong"></div>
<div class="fenlei">
	<p>智能硬件 / 路由器</p>
</div>
<div class="shangpin">
	<a href="#"><img class="dianshi1" src="T1YXYgBvDv1RXrhCrK.jpg" alt=""/><p>小米电视43"</p></a>
	<a href="#"><img class="dianshi1" src="T1y4AgB_Zv1R4cSCrK.png" alt=""/><p>小米电视48"</p></a>
	<a href="#"><img class="dianshi1" src="T1UcWgBvWv1R4cSCrK.png" alt=""/><p>分体电视55"</p></a>
	<a href="#"><img class="dianshi1" src="T1f5J_BXZ_1R4cSCrK.png" alt=""/><p>分体电视60"</p></a>
	<a href="#"><img class="dianshi1" src="T1qVWgBKVv1R4cSCrK.png" alt=""/><p>曲面电视65"</p></a>
	<a href="#"><img class="dianshi1" src="T1n1b_B_dv1R4cSCrK.png" alt=""/><p>分体电视70"</p></a>
	<a href="#"><img class="dianshi1" src="T16.WgB_Kv1R4cSCrK.png" alt=""/><p>主机/低音炮</p></a>
	<a href="#"><img class="dianshi1" src="T1qdJgB5Dv1R4cSCrK.png" alt=""/><p>家庭音响</p></a>
	<a href="#"><img class="dianshi1" src="T1LIJ_BgWT1R4cSCrK.png" alt=""/><p>小米盒子</p></a>
	<a href="#"><img class="dianshi1" src="T1x7V_BsJT1R4cSCrK.png" alt=""/><p>盒子mini版</p></a>
	<a href="#"><img class="dianshi1" src="T1w.bjBQDT1R4cSCrK.png" alt=""/><p>蓝牙手柄</p></a>
	<a href="#"><img class="dianshi1" src="T1kIh_B_Cv1R4cSCrK.png" alt=""/><p>电视/盒子配件</p></a>
</div>
<div class="kong"></div>
<div class="wei">
	<a href="小米.html">
		<div class="tuzi1">
			<img src="weitu11.png" alt=""/>
			<p>商城</p>
		</div>
	</a>
	<a href="小米商品分类.html">
		<div class="tuzi1">
			<img src="weitu22.png" alt=""/>
			<p>分类</p>
		</div>
	</a>
	<a href="购物车.html">
		<div class="tuzi1">
			<img src="weitu33.png" alt=""/>
			<p>购物车</p>
		</div>
	</a>
	<a href="服务.html">
		<div class="tuzi1">
			<img src="weitu44.png" alt=""/>
			<p>服务</p>
		</div>
	</a>
	<div class="qingchu"></div>
</div>
</div>
</body>
</html>
<script>
	$(function(){
		function fullwidth() {
			if ($('body').width() >= 720){
				$('html').css('font-size',100 + 'px');
				return;
			}
			var scale = $('body').width() / 720;
			$('html').css('font-size',100*scale + 'px');
		}
		fullwidth();
		$(window).resize(function(){
			fullwidth();
		})
	});
</script>